<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分销比例和金额-思途CMS{$coreVersion}</title>
 {template 'stourtravel/public/public_js'}
 {php echo Common::getCss('style.css,base.css,base2.css,plist.css,product.css,base_new.css'); }
 {php echo Common::getScript("uploadify/jquery.uploadify.min.js,jquery.buttonbox.js,choose.js,artDialog/dist/dialog-min.js"); }
 {php echo Common::getCss('ui-dialog.css','js/artDialog/css/'); }

</head>
<body style="overflow:hidden">
<table class="content-tab">
   <tr>
    <td width="119px" class="content-lt-td"  valign="top">
     {template 'stourtravel/public/leftnav'}
    <!--右侧内容区-->
    </td>
    <td valign="top" class="content-rt-td" style="overflow:hidden">
    	<div class="cfg-header-bar">

    		<div class="cfg-header-search">
                <span class="select-box w150  mr-10 fl">
                    <select name="typeid" onchange="goSearch(this)" class="select">
                        {loop $productlist $product}
                         <option value="{$product['id']}">{$product['modulename']}</option>
                        {/loop}
                    </select>
                </span>
    			<input type="text" id="searchkey" value="产品标题或编号" datadef="标题或产品ID" class="search-text">
                <a href="javascript:;" class="search-btn" onclick="CHOOSE.searchKeyword()">搜索</a>
    		</div>
    		<a href="javascript:;" class="fr btn btn-primary radius mt-6 mr-10" onclick="window.location.reload()">刷新</a>
<!--            <a href="javascript:;" id="addbtn" class="fr btn btn-primary radius mt-6 mr-10" >添加</a>-->
    	</div>
	     <span class="display-mod">
	
	     </span>
        </div>
 	<div id="product_grid_panel" class="content-nrt">
    
  	</div>
  </td>
  </tr>
 </table> 
<script>
   window.display_mode=1;	//默认显示模式
   window.product_kindid=0;  //默认目的地ID
   var typeid="{$productlist[0]['id']}";


  Ext.onReady(
    function() 
    {
		 Ext.tip.QuickTipManager.init();

        $(".btnbox").buttonBox();

        $("#searchkey").focusEffect();
        //添加按钮
		//产品store
        window.product_store=Ext.create('Ext.data.Store',{

		 fields:[
             'id',
             'title',
             'webid',
             'litpic',
             'displayorder',
             'typeid',
             'url'
         ],
         proxy:{
		   type:'ajax',
           extraParams:{typeid:typeid},
		   api: {
              read: SITEURL+'fenxiao/admin/product/info/action/read',  //读取数据的URL
			  update:SITEURL+'fenxiao/admin/product/info/action/save',
			  destroy:SITEURL+'fenxiao/admin/product/info/action/delete'
              },
		      reader:{
                type: 'json',   //获取数据的格式 
                root: 'lists',
                totalProperty: 'total'
                }	
	         },
		 remoteSort:true,
         autoLoad:true,
		 pageSize:30,
         listeners:{
                load:function( store, records, successful, eOpts )
                {
                    if(!successful){
                        ST.Util.showMsg("{__('norightmsg')}",5,1000);
                    }
                    var pageHtml = ST.Util.page(store.pageSize, store.currentPage, store.getTotalCount(), 10);
                    $("#line_page").html(pageHtml);
                    window.product_grid.doLayout();

                    $(".pageContainer .pagePart a").click(function () {
                        var page = $(this).attr('page');
                        product_store.loadPage(page);
                    });
                }
            }
       });
	   
	  //产品列表 
	  window.product_grid=Ext.create('Ext.grid.Panel',{ 
	   store:product_store,
	   renderTo:'product_grid_panel',
	   border:0,
	   bodyBorder:0,
	   bodyStyle:'border-width:0px',
       scroll:'vertical', //只要垂直滚动条
	   bbar: Ext.create('Ext.toolbar.Toolbar', {
                    store: product_store,  //这个和grid用的store一样
                    displayInfo: true,
                    emptyMsg: "",
					items:[
                        {
                            xtype:'panel',
                            id:'listPagePanel',
                            html:'<div id="line_page"></div>'
                        },
					   {
						  xtype:'combo',
						  fieldLabel:'每页显示数量',
						  width:170,
						  labelAlign:'right',
						  forceSelection:true,
						  value:30,  
						  store:{fields:['num'],data:[{num:30},{num:60},{num:100}]},
						  displayField:'num',
						  valueField:'num',
						  listeners:{
							  select:CHOOSE.changeNum
						  }
					  }
					
					],
				  listeners: {
						single: true,
						render: function(bar) {
							var items = this.items;
							//bar.down('tbfill').hide();

							//bar.insert(0,Ext.create('Ext.panel.Panel',{border:0,html:'<div class="panel_bar"><a class="btn btn-primary radius" href="javascript:void(0);" onclick="CHOOSE.chooseAll()">全选</a><a class="btn btn-primary radius ml-10" href="javascript:void(0);" onclick="setFenxiao()">批量设置</a></div>'}));
							bar.insert(0,Ext.create('Ext.toolbar.Fill'));
							//items.add(Ext.create('Ext.toolbar.Fill'));
						}
					}	
                 }), 		 			 
	   columns:[
			   {
				   text:'选择',
				   width:'8%',
				  // xtype:'templatecolumn',
				   tdCls:'product-ch',
				   align:'center',
				   dataIndex:'id',
				   border:0,
                   menuDisabled:true,
				   renderer : function(value, metadata,record) {
					    var id=record.get('id');
					    return  "<input type='checkbox' class='product_check' id='box_"+id+"' style='cursor:pointer' value='"+value+"'/>";
					}
			   },
               {
                   text:'产品ID',
                   width:'30%',
                   dataIndex:'id',
                   align:'center',
                   menuDisabled:true,
                   border:0,
                   sortable:false,
                   renderer : function(value, metadata,record)
                   {
                      return value;
                   }
               },
			   {
				   text:'标题',
				   width:'30%',
				   dataIndex:'title',
				   align:'left',
                   menuDisabled:true,
				   border:0,
				   sortable:false,
				   renderer : function(value, metadata,record) {
                               var url=record.get('url');
			                   return "<a href='"+url+"' class='line-title' target='_blank'>"+value+"</a>";
                   }

			   },
               {
                   text: '背景图片'+ST.Util.getGridHelp('fenxiao_pic_bg'),
                   width: '32%',
                   dataIndex: 'litpic',
                   align: 'center',
                   border: 0,
                   cls: 'mod-2 sort-col',
                   menuDisabled: true,
                   sortable: true,
                   renderer : function(value, metadata,record)
                   {
                       var id = record.get('id');
                       var uploaded_dis = value? '':'style="display:none"';
                       var uploading_dis = value?'style="display:none"':'';
                       var uploaded_str = '<div class="uploaded_con" '+uploaded_dis+'><img src="'+value+'" width="25" height="25"><span class="ml-5"><a href="javascript:;" data-id="'+id+'" class="set-icon">替换</a><a class="ml-5 icon_del" data-id="'+id+'" href="javascript:;">删除</a> </span></div>';
                       var uploading_str = '<div class="uploading_con" '+uploading_dis+'><a data-id="'+id+'" class="btn btn-primary radius size-S set-icon">上传图片</a></div>';
                       var html='<div id="icon_'+id+'">'+uploaded_str+uploading_str+'</div>'
                       return html;
                   }
               }
              ],
			 listeners:{
		            boxready:function()
		            {
					   var height=Ext.dom.Element.getViewportHeight();
					   this.maxHeight=height-40;
					   this.doLayout();
		            },
					afterlayout:function(grid)
					{
			            if(window.product_kindname)
						{
							 //Ext.getCmp('column_lineorder').setText(window.product_kindname+'-排序')
						}
						else
					    {
							//Ext.getCmp('column_lineorder').setText('排序')
						}
					
						/*window.product_store.each(function(record){
				        id=record.get('id');
						

						
					   });*/
					   var data_height=0;
					   try{
					     data_height=grid.getView().getEl().down('.x-grid-table').getHeight();
					   }catch(e)
					   {
					   }
					  var height=Ext.dom.Element.getViewportHeight();

					  if(data_height>height-40)
					  {
						  window.has_biged=true;
						  grid.height=height-40;
					  }
					  else if(data_height<height-40)
					  {
						  if(window.has_biged)
						  {
							window.has_biged=false;  
							grid.doLayout();
						  }
					  }
				  }
			 },
			 plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                  clicksToEdit:2,
                  listeners:{
					 edit:function(editor, e)
					 {
						var id=e.record.get('id');
						updateField(0,id,e.field,e.value,0);
						return false;
						  
					 },
					 beforeedit:function(editor,e)
					 {
								   
					 }
				 }
               })
             ],
			viewConfig:{
				//enableTextSelection:true
				}	   
	   });
	   
	  
	  
	})
	
	//实现动态窗口大小
  Ext.EventManager.onWindowResize(function(){
      var height=Ext.dom.Element.getViewportHeight();
	  var data_height=window.product_grid.getView().getEl().down('.x-grid-table').getHeight();
      if(data_height>height-40)
          window.product_grid.height=(height-40);
      else
          delete window.product_grid.height;
      window.product_grid.doLayout();
	 }) 

  //更新某个字段
  function updateField(ele,id,field,value,type,callback)
  {
	  var record=window.product_store.getById(id.toString());
	  if(type=='select'||type=='input')
	  {
		  value=Ext.get(ele).getValue();
	  }
      var typeid = record.get('typeid');
	  var view_el=window.product_grid.getView().getEl();
	  Ext.Ajax.request({
						 url   :  SITEURL+"fenxiao/admin/product/info/action/update",
						 method  :  "POST",
						 datatype  :  "JSON",
						 params:{id:id,field:field,val:value,typeid:typeid},
						 success  :  function(response, opts) 
						 {
							 if(response.responseText=='ok')
							 {
							   record.set(field,value);
							   record.commit();
                               if(typeof(callback)=='function')
                               {
                                   callback(record);
                               }
							 }
                             else
                             {
                                 ST.Util.showMsg("{__('norightmsg')}",5,1000);
                             }
						 }});
  }


   $(document).on('click',".set-icon", function(){
       var id = $(this).attr('data-id');
       var record=window.product_store.getById(id.toString());
       var typeid=record.get('typeid');
       var boxurl = SITEURL + 'fenxiao/admin/product/dialog_pic/typeid/'+typeid+'/id/' + id;

       var params = {
           loadWindow:     window,
           loadCallback:   set_icon
       };
       ST.Util.showBox('上传背景图片', boxurl,300,250,null,null,document,params);
   });

   $(document).on('click','.icon_del',function(){
       var id = $(this).attr('data-id');
       updateField(null, id, 'litpic', '',null,function(record){
           $("#icon_" + id +" .uploaded_con").hide();
           $("#icon_" + id +" .uploading_con").show();
       });

   })

   function set_icon(data, flag)
   {
       if( data.src )
       {
           str =  '<img src="'+data.src+'" width="25" height="25" >';
       }
       else
       {
           var str = '<img src="" width="25" height="25" >';
       }
       if(data.src)
       {
           $("#icon_" + data.id + " .uploaded_con img").attr('src',data.src);
           $("#icon_" + data.id +" .uploaded_con").show();
           $("#icon_" + data.id +" .uploading_con").hide();
       }

       updateField(null, data.id, 'litpic', data.src);
   }

   function goSearch(ele)
   {
       var name=$(ele).attr('name');
       var val=$(ele).val();
       window.product_store.getProxy().setExtraParam(name, val);
       window.product_store.loadPage(1);
   }






</script>

</body>
</html>
